<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    // ajax的请求流程
    // 1. 创建请求
    // 2. 配置请求相关的信息 type url async
    // 3. 发送请求  
    // 4. 绑定事件 -> 监听xhr.readyState改变 
    // 5. 接收服务器响应数据 => 后续处理


    getBtn.onclick = function () {
        var wd = "";  // 默认查询所有数据
        var col = "id"; //默认id排序
        var type = "asc"; //默认升序
        var page = 1; // 默认显示第一页
        var size = 10;  // 默认显示10条

        var xhr = new XMLHttpRequest();

        xhr.open("get", `http://43.138.81.225/demo/php/searchGoodsOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);

        xhr.send();

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                var data = JSON.parse(result);
                console.log(data);

                //     var { current, maxPage, list } = data;

                //     if (list.length > 0) { //有数据
                //         tips.innerHTML = `${current}/${maxPage}`;

                //         var html = ""
                //         list.forEach((item) => {
                //             // console.log(item);
                //             var { goodsId, goodsName, goodsPrice, goodsImg, commentCount, shopName } = item;
                //             html += `<li class="list-item">
                //     <img src="${goodsImg}"
                //         alt="">
                //     <div class="price">¥${goodsPrice}</div>
                //     <div class="name">${goodsName}</div>
                // </li>`
                //         })
                //         listUl.innerHTML = html;
                //     }
            }
        }
    }


    postBtn.onclick = function () {
        var user = "a123123";
        var pwd = "123123";
        var phone = 17386141517;
        var email = "a123123@163.com";

        var xhr = new XMLHttpRequest();

        // 以post方式传递数据时,将数据存在请求主体(body)中,随着http header传递给后端 

        // post传参 
        // 1. 数据存放在请求主体中  -> 作为参数放到xhr.send()中
        // 2. 发送请求之前需要先设置请求头(设置传输数据类型)
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        xhr.open("post", `http://43.138.81.225/demo/php/register.php`, true)

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(`user=${user}&pwd=${pwd}&email=${email}&phone=${phone}`);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                result = JSON.parse(result);
                console.log(result);
                // var { status, message } = result;
                // if (status) {
                //     // location.href="./login.html";
                // } else {
                //     alert(message);
                // }
            }
        }

    }

</script>

</html>